<template>
    <div class="edit-tenant" ref="editAddModal">
        <a-modal 
            v-model:open="state.isShow"
            width="700px"
            wrapClassName="custom-modal"
            :bodyStyle="{height:'500px',overflowY:'overlay',overflowX:'hidden',paddingRight:'6px'}"
            :title="state.formState.id != undefined && state.formState.id > 0? '编辑租户':'添加租户'" 
            cancelText="取消"
            okText="确定"
            :getContainer="() => $refs.editAddModal"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <a-form
                ref="formRef"
                :model="state.formState"
                name="basic-form"
                autocomplete="off"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
            >
                <a-tabs v-model:activeKey="state.selectedTabName">
                    <a-tab-pane key="1" tab="基础信息">
                        <a-row :gutter="35">
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="租户类型" :rules="[{ required: true, message: '租户类型不能为空', trigger: 'blur' }]">
                                    <a-radio-group v-model:value="state.formState.tenantType" :disabled="state.formState.id != undefined">
                                        <a-radio v-for="item in useMapDictList('TenantTypeEnum')" :key="item.value" :value="+item.value">{{ item.label }}</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="租户名称" name="name" :rules="[{ required: true, message: '租户名称不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.name" placeholder="租户名称" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="租管账号" name="adminAccount" :rules="[{ required: true, message: '租管账号不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.adminAccount" placeholder="租管账号" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="电话" name="phone" :rules="[{ required: true, message: '电话号码不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.phone" placeholder="电话" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="数据库类型">
                                    <a-select 
                                        v-model:value="state.formState.dbType" 
                                        placeholder="数据库类型" 
                                        allow-clear 
                                        class="w100"
                                        :disabled="state.formState.tenantType == 0 && state.formState.tenantType != undefined"
                                    >
                                        <a-select-option :value="0">MySql</a-select-option>
                                        <a-select-option :value="1">SqlServer</a-select-option>
                                        <a-select-option :value="2">Sqlite</a-select-option>
                                        <a-select-option :value="3">Oracle</a-select-option>
                                        <a-select-option :value="4">PostgreSQL</a-select-option>
                                        <a-select-option :value="5">Dm</a-select-option>
                                        <a-select-option :value="6">Kdbndp</a-select-option>
                                        <a-select-option :value="7">Oscar</a-select-option>
                                        <a-select-option :value="8">MySqlConnector</a-select-option>
                                        <a-select-option :value="9">Access</a-select-option>
                                        <a-select-option :value="10">OpenGauss</a-select-option>
                                        <a-select-option :value="11">QuestDB</a-select-option>
                                        <a-select-option :value="12">HG</a-select-option>
                                        <a-select-option :value="13">ClickHouse</a-select-option>
                                        <a-select-option :value="14">GBase</a-select-option>
                                        <a-select-option :value="15">Odbc</a-select-option>
                                        <a-select-option :value="16">OceanBaseForOracle</a-select-option>
                                        <a-select-option :value="17">TDengine</a-select-option>
                                        <a-select-option :value="18">GaussDB</a-select-option>
                                        <a-select-option :value="19">OceanBase</a-select-option>
                                        <a-select-option :value="20">Tidb</a-select-option>
                                        <a-select-option :value="21">Vastbase</a-select-option>
                                        <a-select-option :value="22">PolarDB</a-select-option>
                                        <a-select-option :value="23">Doris</a-select-option>
                                        <a-select-option :value="900">Custom</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="主机host">
                                    <a-input v-model:value="state.formState.host" placeholder="例：gitee.com" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="连接字符串"
                                :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }">
                                    <a-textarea
                                        v-model:value="state.formState.connection"
                                        placeholder="连接字符串"
                                        allow-clear
                                        :disabled="state.formState.tenantType == 0 && state.formState.tenantType != undefined"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="从库连接串"
                                :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }">
                                    <a-textarea
                                        v-model:value="state.formState.slaveConnections"
                                        placeholder="格式：[{'HitRate':10, 'ConnectionString':'xxx'},{'HitRate':10, 'ConnectionString':'xxx'}]"
                                        allow-clear
                                        :disabled="state.formState.tenantType == 0 && state.formState.tenantType != undefined"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="邮箱">
                                    <a-input v-model:value="state.formState.email" placeholder="邮箱" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="排序">
                                    <a-input-number v-model:value="state.formState.orderNo" placeholder="排序" class="w-full" />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="备注"
                                :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }">
                                    <a-textarea v-model:value="state.formState.remark" placeholder="请输入备注内容" allow-clear />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="站点信息">
                        <a-row :gutter="35">
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="Logo" name="logo" :rules="[{ required: true, message: '应用Logo不能为空', trigger: 'blur' }]" :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }">
                                    <input ref="fileRef" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="display: none;" @change="fileChange">
                                    <a-avatar style="cursor: pointer;" v-if="state.imgPreview" :src="state.imgPreview" shape="square" size="large" @click="clickFile">
                                        <template #icon><UserOutlined /></template>
                                    </a-avatar>
                                    <a-button v-else @click="clickFile">
                                        <template #icon><upload-outlined /></template>
                                        上传头像
                                    </a-button>
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="标题" name="title" :rules="[{ required: true, message: '标题不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.title" placeholder="应用标题" :maxLength="32" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="副标题" name="viceTitle" :rules="[{ required: true, message: '副标题不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.viceTitle" placeholder="应用副标题" :maxLength="32" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="副标题描述" name="viceDesc" :rules="[{ required: true, message: '副标题描述不能为空', trigger: 'blur' }]" 
                                    :label-col="{ span: 3 }"
                                    :wrapper-col="{ span: 21 }">
                                    <a-input v-model:value="state.formState.viceDesc" placeholder="应用副标题描述" :maxLength="64" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24" class="mb20">
                                <a-form-item label="版权信息" name="copyright" :rules="[{ required: true, message: '版权信息不能为空', trigger: 'blur' }]" 
                                :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }">
                                    <a-input v-model:value="state.formState.copyright" placeholder="版权信息" :maxLength="64" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="备案号" name="icp" :rules="[{ required: true, message: '备案号不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.icp" placeholder="备案号" :maxLength="32" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="ICP地址" name="icpUrl" :rules="[{ required: true, message: 'ICP地址不能为空', trigger: 'blur' }]">
                                    <a-input v-model:value="state.formState.icpUrl" placeholder="ICP地址" :maxLength="32" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <a-form-item label="水印" name="watermark">
                                    <a-input v-model:value="state.formState.watermark" placeholder="如果此处留空，则水印功能将被禁用" :maxLength="32" allow-clear />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                </a-tabs>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue'
import type { ItemType } from '../types';
import type { FormInstance } from 'ant-design-vue';
import { useMapDictList } from '@/hooks';

const fileRef = ref()
const formRef = ref<FormInstance>()
const editAddModal = ref()
const emits = defineEmits<{
    (e:"handleQuery"):void
}>()

const state = reactive({
    isShow:false,
    formState:{} as ItemType,
    selectedTabName:"1",
    imgPreview:""
})

const handleOk = async ()=>{

}

const handleCancel = ()=>{
    state.isShow = false
}

const handleOpen = (row:ItemType)=>{
    state.isShow = true
    state.formState = row
    state.imgPreview = import.meta.env.VITE_API_URL + state.formState.logo
}

const fileChange = async (e: Event) => {
    const target = e.target as HTMLInputElement
    const file = target.files?.[0] as File
    state.imgPreview = URL.createObjectURL(file)
}


const clickFile = ()=>{
    fileRef.value?.click()
}
defineExpose({
    handleOpen
})
</script>

<style lang="scss" scoped>
    
</style>